<template>
    <view>
	<tabs :tabs="tabs" @tabsItemChange="hendleTabsItemChange">
	<view class="fb_main">
		<view class="fb_title">问题的种类</view>
		<view v-if="index===0" class="fb_tips">
		<text>功能建议</text>
		<text>购买遇到问题</text>
		<text>性能问题</text>
		<text>其他</text>
		</view>
		<view v-if="index===1" class="fb_tips">
		<text>商品问题</text>
		<text>售货问题</text>
		<text>物流问题</text>
		<text>其他</text>
		</view>
		<view class="fb_content">
			<textarea v-model="textVal" value="textVal" @input="hendletextInput" placeholder="请描述一下您的问题"></textarea>
		<view class="fb_tool">
			<button @click="hendleChooseImg">+</button>
			<view class="up_img_item"
			v-for="(item,index) in chooseImgs"
			:key="index"
			@click="hendleRemoveImg"
			:data-index="index"
			><up-img :src="item"></up-img></view>
		</view>
		</view>
		<view class="form_btn_wrap">
		<button @click="hendleFormSubmit">
		<icon type="success_no_circle" size="23" color="white"></icon>
			提交
		</button>
		</view>
	</view>
	</tabs>

	</view>
</template>

<script>
import Tabs from "@/components/Tabs"
import UpImg from "@/components/UpImg"
	export default {
		components:{
			Tabs,
			UpImg
		},
		
		data(){
			return{
				  
				tabs:[
					{
						id:0,
						value:"体验问题",
						isActive:true
					},
					{
						id:1,
						value:"商品、商家投诉",
						isActive:false
					}
				],
				chooseImgs:[],
				textVal:"",
				upLoadImgs:[],
				index:0
			}
    	},

        methods:{
			//标题点击事件 从子组件传递过来
			hendleTabsItemChange(e){
				//获取索引
				const index = e.index;
				
				this.index = index;
				// //修改源数据
				let tabs = this.tabs;
				tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
				// //赋值到data
				this.tabs = tabs;
			},
			hendletextInput(e){
				
				this.textVal=e.detail.value;
					
			},
			hendleFormSubmit(){
				const textVal = this.textVal;
				const chooseImgs = this.chooseImgs;
				if(!textVal.trim()){
					uni.showToast({
					title: '输入不合法',
					icon:'none',
					mask:true,
					})
					return;
				}
				uni.showLoading({
				title: '正在上传中',
				mask:true
				})
				if(chooseImgs.length!=0){
					chooseImgs.forEach((v,i)=>{
						uni.uploadFile({
							filePath: v,
							name: 'image',
							url: 'https://img.coolcr.cn/api/upload',
							formData:{},
							success:(result) =>{
								console.log(result);
								let url = JSON.parse(result.data).data.url;
								this.upLoadImgs.push(url);
								console.log(this.upLoadImgs);
								if(i===chooseImgs.length-1){
									uni.hideLoading();
									console.log("上传完毕，提交数据到后台");
									//重置页面
									this.textVal="";
									this.chooseImgs=[];
									//返回上一页
									uni.navigateBack({
									delta: 1,
									})
								}
		
							}
						});
					})
				}else{
					uni.hideLoading();
					console.log("只是上传了文本");
					uni.navigateBack({
						delta: 1,
					})
				}
				
			},
		    hendleChooseImg(){
				uni.chooseImage({
				count: 9,
				sizeType:['original','compressed'],
				sourceType:['album','camera'],
				success:(result)=>{
					console.log(result);
					this.chooseImgs=[...this.chooseImgs,...result.tempFilePaths];
				}
				})
			},
			hendleRemoveImg(e){
				const index = e.currentTarget.dataset;
				let chooseImgs = this.chooseImgs;
				chooseImgs.splice(index,1);
				
				this.chooseImgs = chooseImgs;

			}
		}
		
	}
</script>

<style lang="scss">
	page{
    	background-color: #eeeeee;
	}
	tabs {
		view.fb_main {
			padding: 20rpx;
			color: #666;
		view.fb_title {
	
		}
	
		view.fb_tips {
			display: flex;
			flex-wrap: wrap;
			text {
				width: 30%;
				padding: 10rpx;
				text-align: center;
				background-color: #fff;
				margin: 20rpx 10rpx;
			}
		}
	
		view.fb_content {
			background-color: #fff;
			margin-top: 20rpx;
			textarea {
				padding: 10rpx;
			}
	
			view.fb_tool {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 20rpx;
				button{
					margin: 0;
					width: 90rpx;
					height: 90rpx;
					font-size: 60rpx;
					padding: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20rpx;
					margin-left: 20rpx;
					color: #ccc;
					border-bottom: 1rpx solid #ccc;
				}
				.up_img_item{
					margin-left: 20rpx;
					margin-top: 20rpx;
				}
	
			}
		}
	
		view.form_btn_wrap {
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			button{
				margin: 0;
				width: 30%;
				background-color: var(--themeColor);
				color: #fff;
			}
	
		}
		}
	}
</style>